<template>
  <div class="container" :range="[startDate, endDate]">
    <el-calendar v-model="value" v-loading="loading" size="mini">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{date, data}">
        {{ data.day.split('-').slice(1).join('-') }}
        <div v-for="item in arr1" :key="item.id">
          <p :class="'css'+item.date_type" v-if="item.date === data.day">
            {{item.date_type_name}}
          </p>
        </div>
      </template>
    </el-calendar>

    <el-dialog title="日期更新" :visible.sync="show" width="30%" @close="cancel">
      <el-form :model="formList" ref="formList" label-width="80px" :inline="false" size="normal">
        <template v-if="!formList.id">
          <el-form-item label="日期">
            <el-date-picker v-model="formList.startDateStr" type="date" value-format="yyyy-MM-dd" size="normal"
              placeholder="开始日期" class="wid" :clearable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker v-model="formList.endDateStr" type="date" value-format="yyyy-MM-dd" size="normal"
              placeholder="结束日期" class="wid" :clearable="false">
            </el-date-picker>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="日期">
            <el-date-picker v-model="formList.date" type="date" value-format="yyyy-MM-dd" size="normal"
              placeholder="选择日期时间" class="wid" :clearable="false">
            </el-date-picker>
          </el-form-item>
        </template>
        <el-form-item label="类型">
          <el-select v-model="formList.date_type" value-key="date_type" placeholder="类型" class="wid">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="formList.batch" type="year" value-format="yyyy" size="normal" placeholder="生效年份"
            class="wid" :clearable="false">
          </el-date-picker>
        </el-form-item>
        <div class="center">
          <el-button type="primary" size="default" @click="onAdds" v-if="!formList.id">新增</el-button>
          <el-button type="primary" size="default" @click="onUp" v-else>更新</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: '',
  components: {


  },
  props: {

  },
  data () {
    return {
      loading: false,
      value: new Date(),
      arr1: [],
      txDate: [],
      jrDate: [],
      formList: {},
      show: false,
      options: [
        { value: '0', label: '假日' },
        { value: '1', label: '调休' },
      ],
      startDate: '',
      endDate: ''
    }
  },
  created () {

  },
  mounted () {
    // this.$nextTick(() => {
    //   // 点击前一个月
    //   let prevBtn = document.querySelector(
    //     ".el-calendar__button-group .el-button-group>button:nth-child(1)"
    //   );
    //   prevBtn.addEventListener("click", () => {
    //     this.init()
    //   });
    // });
    this.$nextTick(() => {
      // 点击今天
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      prevBtn.addEventListener("click", () => {
        console.log('今天');
      });
    });
    // this.$nextTick(() => {
    //   // 点击后一个月
    //   let prevBtn = document.querySelector(
    //     ".el-calendar__button-group .el-button-group>button:last-child"
    //   );
    //   prevBtn.addEventListener("click", () => {
    //     this.init()
    //   });
    // });
    this.$nextTick(() => {
      // 点击日历单元格
      let prevBtn = document.querySelectorAll(".el-calendar-table__row td");
      prevBtn.forEach(item => {
        item.addEventListener("click", () => {
          this.formList = {}
          let clickDate = this.$util.formatDate(this.value)
          if (this.arr1.length == 0) {
            this.show = true
          } else {
            for (let index = 0; index < this.arr1.length; index++) {
              const item1 = this.arr1[index];
              if (item1.date == clickDate) {

                // 有日期更新
                this.formList = {
                  id: item1.id,
                  date: item1.date,
                  date_type: item1.date_type,
                  batch: item1.batch
                }
                this.show = true
                return false
              } else if (index == this.arr1.length - 1) {
                this.formList = {}
                this.show = true
                return false
              }
            }
          }
          return false
        });
      });
    });
    this.init()
  },
  methods: {
    async init () {
      this.loading = true
      // 获取当前时间的月初月末
      let currentDay = this.value || new Date()
      currentDay.setDate(1)
      // getDay()
      let endDay = new Date(currentDay)
      endDay.setMonth(currentDay.getMonth() + 1)
      endDay.setDate(1)
      // 处理成6周格式
      // endDay.setDate(7 - endDay.getDay() + 1)
      // currentDay.setDate(-(currentDay.getDay() - 1))

      this.startDate = this.$util.formatDate(currentDay)
      this.endDate = this.$util.formatDate(endDay)
      const res = await this.$http('sysDatePage', {
        startDateStr: this.startDate,
        endDateStr: this.endDate,
      })
      this.arr1 = res.results
      this.loading = false
    },
    async onAdds () {
      const res = await this.$http('sysDateAdd', {
        ...this.formList
      })
      this.$tips.success(res.errmsg)
      this.cancel()
      this.init()
    },
    async onUp () {
      const res = await this.$http('sysDateUp', {
        ...this.formList
      })
      this.$tips.success(res.errmsg)
      this.cancel()
      this.init()
    },
    cancel () {
      this.formList = {}
      this.show = false
    }

  },
  computed: {

  },
  watch: {
    value (newDate, oldDate) {
      if (newDate.getMonth() != oldDate.getMonth()) {
        this.init()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.is-selected {
  color: #1989fa;
}
.css0 {
  color: green;
}
.css1 {
  color: coral;
}
</style>
